<template lang="pug">
  div.mid
    div.img
    div.searchBox
      span.search-content
        input.search-text
        span.camera
      button.search-button 百度一下
</template>

<script>
export default {
  name: 'mid',
  data () {
    return {
    }
  }
}
</script>

<style scoped lang="stylus">
.mid
  margin-top 1%
  text-align center
  .img
    display: inline-block
    background url("../../../../static/img/home/BaiDu-logo.png") no-repeat
    background-size contain
    width:270px
    height:129px
  .searchBox
    margin-top 22px
    .search-content
        position relative
        width: 540px
        height 35px
      .search-text
        padding 6px 7px
        width: 524px
        height 23px
        outline none
        border 1px solid #999
        border-right none
        &:hover
          border-color #333
        &:focus
          border-color #3385ff;
      .camera
        position: absolute
        background url("../../../../static/img/home/camera-icon.png") no-repeat
        //background-position
        width:18px
        height:16px
        top:0
        bottom: 0
        margin auto 0
        right:10px
        cursor pointer
        &:hover
          background-position 0 -20px
    .search-button
      outline:none
      border none
      background: #3385ff;
      color: white
      width: 100px;
      height: 37px;
      vertical-align top
      cursor pointer
      &:hover
        background: #317ef3;
        border-bottom: 1px solid #2868c8;
        box-shadow: 1px 1px 1px #ccc;
      &:active
        background: #3075dc;
</style>
